<template>
    <div class="aaa">
        <Form ref="formRef" :formData="formData" :formList="formList">
            <template #upload>
                <el-button type="primary">上传文件</el-button>
            </template>
            <template #tip>
                <div class="el-upload__tip">jpg/png files with a size less than 500KB.</div>
            </template>
        </Form>
        <div @click="click2">提交</div>
        <Table ref="tableRef" :tableList="tableList" :tableApi="tableApi">
            <template #id="scope">
                <div
                    :style="{
                        display: 'flex',
                        justifyContent: 'space-between'
                    }"
                >
                    <div @click="() => click(scope.row)">删除</div>
                    <div @click="() => click(scope.row)">详情</div>
                    <div @click="() => click(scope.row)">编辑</div>
                </div>
            </template>
        </Table>
    </div>
</template>

<script setup lang="ts">
import { useUsersStore } from 'store/useUsers';
import { getTableData1 } from 'api/common';
const tableRef = ref<any>(null);
const formRef = ref<any>(null);
const users = useUsersStore();
users.setUsers({
    method: 'get',
    url: '/data/table.json'
});
const click = (val: any) => {
    console.log(val);
};
const click1 = () => {
    tableRef.value?.tableInstance.clearSelection();
    console.log(tableRef.value?.tableInstance.getSelectionRows(), 'acacavczc');
};
const click2 = async () => {
    // formRef.value.reset();
    formRef.value.submit(() => {
        console.log(formData, 'formData');
    });

    // let res = await formRef.value.formInstance.clearValidate('name');
    // console.log(res, 'acacavczc');
};
// console.log(users.getUsersCpu, users.useDataRct, '===============');
const tableApi = reactive({
    api: getTableData1,
    params: { name: 'afsv' },
    pageSize: 'pageSize',
    pageNumber: 'pageNumber',
    formatResults: (res: any) => {
        const { results, totalSum } = res;
        return [results, totalSum];
    }
});
const tableList = [
    {
        label: '时间',
        prop: 'date',
        sortable: true
    },
    {
        label: '名字',
        prop: 'name',
        width: '120'
    },
    {
        label: '详情',
        prop: 'address'
    },
    {
        label: '操作',
        prop: 'id',
        width: '120',
        slot: true
    }
];
const formList = [
    {
        placeholder: '请输入名称',
        label: '名称',
        prop: 'name',
        type: 'text',
        clearable: true,
        disabled: false,
        rules: [
            { required: true, message: 'age is required', trigger: 'blur' },
            { min: 5, message: '最小5', trigger: ['change', 'blur'] }
        ],
        width: '400px'
    },
    {
        placeholder: '请输入密码',
        label: '密码',
        prop: 'password',
        type: 'password',
        clearable: true,
        disabled: false
    },
    {
        type: 'slot'
    },
    // {
    //     placeholder: '级联选择器',
    //     label: '级联选择器',
    //     prop: 'cascader',
    //     type: 'cascader',
    //     multiple: true,
    //     options: [
    //         {
    //             value: 'guide',
    //             label: 'Guide',
    //             children: [
    //                 {
    //                     value: 'disciplines',
    //                     label: 'Disciplines',
    //                     children: [
    //                         {
    //                             value: 'consistency',
    //                             label: 'Consistency'
    //                         },
    //                         {
    //                             value: 'feedback',
    //                             label: 'Feedback'
    //                         },
    //                         {
    //                             value: 'efficiency',
    //                             label: 'Efficiency'
    //                         },
    //                         {
    //                             value: 'controllability',
    //                             label: 'Controllability'
    //                         }
    //                     ]
    //                 },
    //                 {
    //                     value: 'navigation',
    //                     label: 'Navigation',
    //                     children: [
    //                         {
    //                             value: 'side nav',
    //                             label: 'Side Navigation'
    //                         },
    //                         {
    //                             value: 'top nav',
    //                             label: 'Top Navigation'
    //                         }
    //                     ]
    //                 }
    //             ]
    //         },
    //         {
    //             value: 'resource',
    //             label: 'Resource',
    //             children: [
    //                 {
    //                     value: 'axure',
    //                     label: 'Axure Components'
    //                 },
    //                 {
    //                     value: 'sketch',
    //                     label: 'Sketch Templates'
    //                 },
    //                 {
    //                     value: 'docs',
    //                     label: 'Design Documentation'
    //                 }
    //             ]
    //         }
    //     ]
    // },
    // {
    //     label: '单选框',
    //     prop: 'radio',
    //     type: 'radio',
    //     multiple: true,
    //     options: [
    //         {
    //             label: 'A',
    //             value: 'A'
    //         },
    //         {
    //             label: 'B',
    //             value: 'B'
    //         },
    //         {
    //             label: 'C',
    //             value: 'C'
    //         }
    //     ]
    // },
    {
        label: '开关',
        prop: 'switch',
        type: 'switch',
        multiple: true
    },
    {
        label: '评分',
        prop: 'rate',
        type: 'rate',
        multiple: true
    },
    {
        label: '滑块',
        prop: 'slider',
        type: 'slider',
        multiple: true
    },
    {
        label: '取色器',
        prop: 'picker',
        type: 'picker',
        multiple: true
    },
    // {
    //     label: '多选框',
    //     prop: 'checkbox',
    //     type: 'checkbox',
    //     multiple: true,
    //     options: [
    //         {
    //             label: 'A',
    //             value: 'A'
    //         },
    //         {
    //             label: 'B',
    //             value: 'B'
    //         },
    //         {
    //             label: 'C',
    //             value: 'C'
    //         }
    //     ]
    // },
    {
        placeholder: '自动补全选择框',
        label: '自动补全选择框',
        prop: 'autocomplete',
        type: 'autocomplete'
    },
    {
        label: '时间筛选',
        prop: 'datetimerange',
        type: 'datetimerange',
        startPlaceholder: '开始时间',
        endPlaceholder: '结束时间'
    },
    {
        label: '时间筛选',
        prop: 'daterange',
        type: 'daterange'
    },
    {
        label: '时间筛选',
        prop: 'datetime',
        type: 'datetime'
    },
    {
        label: '时间筛选',
        prop: 'date',
        type: 'date'
    },
    {
        label: '数字输入框',
        prop: 'number',
        type: 'number'
    },
    {
        label: '上传文件',
        prop: 'upload',
        type: 'upload',
        'list-type': 'text'
    }
    // {
    //     placeholder: '请选择',
    //     label: '全部',
    //     prop: 'degreeRisk',
    //     type: 'select',
    //     multiple: false,
    //     disabled: false,
    //     clearable: true,
    //     rules: [
    //         {
    //             required: true,
    //             message: '分配角色不能为空',
    //             trigger: ['blur', 'change']
    //         }
    //     ],
    //     options: [
    //         {
    //             label: '全部',
    //             value: '全部',
    //             disabled: false
    //         },
    //         {
    //             label: '111',
    //             value: '111',
    //             disabled: false
    //         }
    //     ]
    // }
];

const formData = reactive({
    name: '',
    password: '',
    cascader: '',
    radio: 0,
    switch: '',
    rate: 0,
    slider: 0,
    picker: '',
    checkbox: '',
    autocomplete: '',
    degreeRisk: '',
    time: '',
    time1: '',
    time2: '',
    time3: '',
    number: 0,
    upload: []
});
</script>

<style lang="scss" scoped>
.aaa {
    width: 1300px;
    height: 500px;
}
:deep(.el-upload) {
    display: block;
}
</style>
